<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>电子名片</title>
    <link rel="icon" href="./favicon.png" />
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/element-ui.css" />
    <link rel="stylesheet" href="../common/css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 用户信息 -->
    <div id="app" v-cloak>
      <!-- top -->
      <div class="top">
        <div class="text">你好,欢迎来到Feijiu网</div>
      </div>
      <!-- header -->
      <header>
        <div class="content">
          <img src="./images/header-1.png" class="img-header-1" />
          <img src="./images/header-2.png" class="img-header-2" />
        </div>
      </header>
      <section class="page-container">
        <!-- banner -->
        <div class="bannerBox">
          <div class="bannerInfo">
            <div class="bannerleft">
              <div class="tit_1">
                企业处置废旧物资就来
                <img
                  src="https://style.feijiu.net/images/publish/banner_feijiu.png"
                  alt=""
                  width="130px"
                  height="60px"
                />
              </div>
              <p class="tit_2">名片裂变，生意破圈！</p>
              <p class="tit_2">
                定制个性化电子名片，裂变分享，全国二手商触手可及，极速拓展人脉！
              </p>
            </div>
            <div class="banner_right">
              <img
                src="https://style.feijiu.net/images/publish/banner_code.png"
                alt=""
                width="400px"
                height="260px"
              />
            </div>
          </div>
        </div>
        <!-- 我的名片 -->
        <div class="panel panel-card">
          <div class="panel-title">我的名片</div>
          <div class="panel-content" v-loading="loading.cardInfo">
            <div class="card-container" v-if="cardInfo">
              <div
                class="card-box"
                :style="{backgroundImage: `url(${cardInfo.img_front})` }"
              >
                <div class="card-top">
                  <div class="line">
                    <p class="text-name">{{cardInfo.name}}</p>
                    <p class="text-position">{{cardInfo.position}}</p>
                  </div>
                  <p class="text-company">{{cardInfo.company}}</p>
                </div>
                <div class="card-bottom">
                  <div class="line">
                    <img src="./images/icon-tel.png" class="card-icon" />
                    <p class="text">{{cardInfo.phone}}</p>
                  </div>
                  <div class="line">
                    <img src="./images/icon-add.png" class="card-icon" />
                    <p class="text">{{cardInfo.address}}</p>
                  </div>
                </div>
              </div>
              <div
                class="card-box back"
                :style="{backgroundImage: `url(${cardInfo.img_back})` }"
              >
                <p class="card-title">主营产品</p>
                <p class="label label-product">{{cardInfo.product}}</p>
              </div>
              <div class="button-box">
                <div class="button-edit" @click="onEdit">
                  <img src="./images/icon-edit.png" class="icon-edit" />编辑名片
                </div>
                <div class="button-share" @click="onShowDialog">
                  <img src="./images/icon-share.png" class="icon-share" />发名片
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 我的商友录 -->
        <div class="panel panel-1">
          <div class="panel-title">我的商友录</div>
          <div class="panel-content" v-loading="loading.friendList">
            <div class="panel-list">
              <div class="item" v-for="item in friendList" :key="item.id">
                <div class="item-content">
                  <div class="item-left">
                    <div class="line">
                      <div class="text-name">{{item.name}}</div>
                      <div class="text-position">{{item.position}}</div>
                    </div>
                    <div class="line">
                      <img src="./images/icon-phone.png" class="icon-phone" />
                      <p class="text-phone">{{item.phone}}</p>
                    </div>
                  </div>
                  <div class="item-right">
                    <div class="desc">
                      <div class="text-desc">{{item.company}}</div>
                      <div class="icon-list">
                        <div class="icon-item" v-if="item.address">
                          <img src="./images/icon-position.png" class="icon" />
                          <span class="text">{{item.address}}</span>
                        </div>
                      </div>
                    </div>
                    <a :href="item.link" target="_blank">
                      <div class="button">
                        <img
                          src="./images/icon-message.png"
                          class="icon-message"
                        />
                        <div class="text">立即联系</div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="empty" v-if="friendList.length === 0">暂无数据</div>
            <div class="button-box">
              <el-button type="text">
                <a
                  href="https://user.feijiu.net/DiscussesFriend_List.aspx"
                  target="_blank"
                >
                  查看更多
                </a>
              </el-button>
            </div>
          </div>
        </div>
        <!-- 行业商友 -->
        <div class="panel panel-1">
          <div class="panel-title">行业商友</div>
          <div class="panel-content" v-loading="loading.industryList">
            <div class="panel-list">
              <div class="item" v-for="item in industryList" :key="item.id">
                <div class="item-content">
                  <div class="item-left">
                    <div class="line">
                      <div class="text-name">{{item.name}}</div>
                      <div class="text-position">{{item.position}}</div>
                    </div>
                    <div class="line">
                      <img src="./images/icon-phone.png" class="icon-phone" />
                      <p class="text-phone">{{item.phone}}</p>
                    </div>
                  </div>
                  <div class="item-right">
                    <div class="desc">
                      <div class="text-desc">{{item.company}}</div>
                      <div class="icon-list">
                        <div class="icon-item" v-if="item.address">
                          <img src="./images/icon-position.png" class="icon" />
                          <span class="text">{{item.address}}</span>
                        </div>
                      </div>
                    </div>
                    <div class="button disabled" v-if="item.is_add">
                      <i class="el-icon el-icon-user-solid"></i>
                      <div class="text">已添加</div>
                    </div>
                    <div v-else class="button" @click="onAddFriend(item)">
                      <i
                        class="el-icon el-icon-loading"
                        v-if="item.is_loading"
                      ></i>
                      <i class="el-icon el-icon-user-solid" v-else></i>
                      <div class="text">加为商友</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="empty" v-if="industryList.length === 0">暂无数据</div>
            <div class="button-box">
              <el-button type="text">
                <a
                  href="https://user.feijiu.net/DiscussesFriend_Search.aspx"
                  target="_blank"
                >
                  查看更多
                </a>
              </el-button>
            </div>
          </div>
        </div>
      </section>

      <!-- 分享 -->
      <el-dialog title="分享" :visible.sync="showDialog" width="600px">
        <div class="dialog-container" v-if="cardInfo">
          <div class="qrcode-box">
            <div id="qrcode"></div>
            <p class="text">
              {{cardInfo.name}} {{cardInfo.position}} 电子名片
              <el-button type="text" @click="onDownload">
                <i class="el-icon el-icon-download"></i>
              </el-button>
            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="showDialog = false">关闭</el-button>
        </div>
      </el-dialog>
      <!-- 权限 -->
      <el-dialog
        title="权限"
        :visible.sync="showDialogPermission"
        width="600px"
      >
        <div class="dialog-container">
          <div class="text-permission">
            <i class="el-icon-warning"></i>
            <p class="text-1">此名片功能需要升级会员或开通权限后才可使用</p>
            <p class="text-2">如想使用，咨询热线：400-136-5858</p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="showDialogPermission = false"
            >关闭</el-button
          >
        </div>
      </el-dialog>
    </div>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/element-ui.js"></script>
    <script src="./js/qrcode.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
